<style lang="scss" scoped>
.chat {
  width: 100%;
  height: 530px;
  background-color: #e6e6e6;
  overflow-y: scroll;
  display: flex;
  position: relative;
}
.left {
  width: 50%;
  height: 530px;
}
.right {
  position: relative;
  width: 50%;
  height: 530px;
}
.zuo {
  height: '30px';
  display: flex;
  margin-top: 50px;
}
.zuo p {
  background-color: #fff;
  border-radius: 5px;
  margin-top: 10px;
  margin-left: 15px;
}
.zuo img {
  width: 30px;
  height: 30px;
}
.you {
  height: '30px';
  display: flex;
  margin-top: 50px;
  flex-direction: row-reverse;
}
.you p {
  background-color: pink;
  border-radius: 5px;
  margin-left: 10px;
  line-height: 30px;
}
.you img {
  width: 30px;
  height: 30px;
  margin-left: 20px;
}
.bottom {
  position: fixed;
  bottom: 10px;
  z-index: 88888;
  width: 100%;
  text-align: center;
  display: flex;
  height: 70px;
  background: #fff;
  input {
    width: 80%;
    height: 60px;
    border: 1px solid #1fd712;
    padding-left: 20px;
    margin-left: 10px;
    margin-top: 10px;
  }
  button {
    width: 80px;
    height: 40px;
    border-radius: 20px;
    border: 1px solid #ccc;
    background-color: red;
    margin-left: 10px;
    margin-top: 20px;
  }
}
</style>
<template>
  <div>
    <van-nav-bar title="Ai导诊台" left-text="返回" left-arrow @click-left="$router.go(-1)" />
    <div class="chat">
      <div class="left">
        <div className="zuo" v-for="(message, index) in messages" :key="index">
          <img
            src="https://img2.baidu.com/it/u=186808850,2178610585&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1729616400&t=95e669f874577fea11f49d8d6a00934d"
          />
          <p>{{ message }}</p>
        </div>
      </div>
      <div class="right">
        <div className="you" v-for="(messages1, index) in messages1" :key="index">
          <p>{{ messages1 }}</p>
          <img
            src="https://img1.baidu.com/it/u=1090452517,2487311686&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1729616400&t=6df064b726a14ab1319e326be7db8cf4"
          />
        </div>
      </div>
      <div class="bottom">
        <input v-model="newMessage" placeholder="请用一句话描述您的问题" /><button
          @click="sendMessage"
        >
          发送
        </button>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
const messages = ref([])
const newMessage: any = ref('')
const messages1 = ref([])
const websocket: any = ref(null)
const connectWebSocket = () => {
  websocket.value = new WebSocket('ws://localhost:3000')
  websocket.value.onmessage = (event:any) => {
    console.log(event)

    messages.value.push(event.data)
  }
}
connectWebSocket()

const sendMessage = () => {
  if (newMessage.value) {
    websocket.value.send(newMessage.value)
    messages1.value.push(newMessage.value)
    newMessage.value = ''
  }
}
</script>